<style>
    .captcha-img img {
        border: 1px solid #e6e6e6;
        height: 36px;
        width: 100%;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <div class="layui-form layuimini-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">旧的密码</label>
                <div class="layui-input-block">
                    <input type="password" name="oldPassword" lay-verify="required" lay-reqtext="旧的密码不能为空"
                           placeholder="请输入旧的密码" class="layui-input" autocomplete="new-password">
                    <tip>填写自己账号的当前密码。</tip>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">新的密码</label>
                <div class="layui-input-block">
                    <input type="password" name="newPassword" lay-verify="required" lay-reqtext="新的密码不能为空"
                           placeholder="请输入新的密码" class="layui-input" autocomplete="new-password">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">新的密码</label>
                <div class="layui-input-block">
                    <input type="password" name="againPassword" lay-verify="required" lay-reqtext="新的密码不能为空"
                           placeholder="请再次输入新的密码" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline layui-input-wrap">
                        <input type="text" name="captcha" lay-verify="required" autocomplete="off" lay-reqtext="请填写验证码" placeholder="请输入验证码"
                               lay-affix="clear" class="layui-input">
                    </div>
                    <div class="layui-form-mid" style="padding: 0!important;">
                        <div class="captcha-img">
                            <img id="captcha" lay-on="getCaptcha">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="saveBtn">确认修改</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var salt = "W%o$gxG6Nbbg+S4@W5&9VQeud&2O1^V8&We^YwhX-1N+_m7&KQ#JJ@a+UX9Rr5Bk";
    var verifyKey;
    var publicKey;

    layui.use(['form', 'util'], function () {
        var form = layui.form,
            layer = layui.layer,
            util = layui.util;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        getCaptcha();

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var newPassword = data.field.newPassword;
            var againPassword = data.field.againPassword;
            if (newPassword != againPassword) {
                layer.msg('新密码前后输入不一致，请检查！', {time: 1000, icon: 5});
                return false;
            }

            data.field.oldPassword = sm2.doEncrypt(sm3(data.field.oldPassword + salt), publicKey);
            data.field.newPassword = sm2.doEncrypt(sm3(data.field.newPassword + salt), publicKey);
            data.field.againPassword = sm2.doEncrypt(sm3(data.field.againPassword + salt), publicKey);
            data.field.uuid = verifyKey;
            layer.confirm('确定要修改密码吗', {
                title: '提示'
            }, function (index) {
                AjaxUtil.postJSON({
                    url: '/tenant/auth/editPassword',
                    data: JSON.stringify(data.field),
                    success: function (res) {
                        if (res.code == '0') {
                            logout();
                            layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                layer.close(index);
                                window.location = '/page/tenant/login.html';
                            });
                        } else {
                            layer.msg(res.msg, {time: 1000, icon: 2});
                            getCaptcha();
                        }
                    },
                    error: function (error) {
                        layer.msg(error, {time: 1000, icon: 2});
                    }
                });
            });
            return false;
        });


        util.on('lay-on', {
            getCaptcha: function () {
                getCaptcha();
            },
        });

        // 获取图形验证码
        function getCaptcha() {
            AjaxUtil.get({
                url: "/tenant/auth/getCode",
                success: function (res) {
                    $("#captcha").prop("src", "data:image/png;base64," + res.data.img);
                    verifyKey = res.data.uuid;
                    publicKey = res.data.publicKey;
                },
                error: function (error) {
                    layer.msg(error, {time: 1000, icon: 2});
                }
            });
        }


        function logout() {
            AjaxUtil.get({
                url: '/auth/logout',
                success: function (res) {
                    if (res.code === 0) {
                        sessionStorage.removeItem('tenant_token');
                        sessionStorage.removeItem('tenant_username');
                    }
                },
                error: function (error) {
                    layer.msg(error, {time: 1000, icon: 2});
                }
            });
        }
    });
</script>